<template>
    <div class="complain-page">
        <!-- 顶部导航 -->

        <TopNav
                title="我要投诉"
                rightText="添加投诉"
                :rightParams="{ courseId: 123 }"
                :showBack="true"
                :showAdd="true"
                @rightClick="goAddComplain"
        />
        <!-- 页面内容 -->
        <div class="content">
            <div class="empty-tip" v-if="complaints.length === 0">
                暂无投诉内容，点击“添加投诉”创建新投诉吧～
            </div>

            <!-- 列表 -->
            <div class="list-container">

                <div v-for="item in complaints" :key="item.id" class="complaint-item">
                    <div class="complaint-info">
                        <div class="info-row">
                            <span class="label">订单ID:</span>
                            <span class="value">{{ item.orderId }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">商品名称:</span>
                            <span class="value">{{ item.productName }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">投诉原因:</span>
                            <span class="value">{{ item.reason }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">我的诉求:</span>
                            <span class="value">{{ item.demand }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">处理状态:</span>
                            <span class="value" :class="item.statusClass2">{{ item.status===0?'待处理':'已处理' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">处理结果:</span>
                            <span class="value">{{ item.result || '--' }}</span>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import { getComplaintList } from '@/api/index.js'
    export default {
        name: "ComplainPage",
        components: {
            TopNav // 注册
        },
        data() {
            return {
                complaints:[]
            }
        },
        methods: {
            goBack() {
                this.$router.back();
            },
            addComplain() {
                alert("跳转到新增投诉页面");
            },
            goAddComplain(params) {
                console.log("跳转参数：", params);
                const queryString = new URLSearchParams(params).toString();

                this.$router.push(`/profile/complain/addComplain?${queryString}`);
            },
            async getComplaintList(){
                const res = await getComplaintList();
                console.log('res===',res)
                if(res.code == 200){
                    for(let i=0;i<res.data.length;i++){
                        let item = res.data[i];
                        if(item.status === 0){
                            item.statusClass = 'status-error';
                        }
                        if(item.status === 1){
                            item.statusClass = 'status-done';
                        }
                    }
                    this.complaints = res.data;
                }
            }
        },
        mounted() {
            this.getComplaintList()
        }
    };
</script>

<style scoped>
    .complain-page {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    /* 页面内容 */
    .content {
        padding: 12px;
    }

    .empty-tip {
        text-align: center;
        color: #999;
        font-size: 14px;
        padding-top: 40px;
    }




    .complaint-list-page {
        width: 100%;
        min-height: 100vh;
        background-color: #f2f4f7;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }


    .back-btn img {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .title {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
    }

    /* 列表容器 */
    .list-container {
    }

    /* 每条投诉 */
    .complaint-item {
        background-color: #fff;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    /* 订单信息 */
    .order-block {
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
    }

    .order-id {
        font-weight: 600;
        color: #222;
        font-size: 15px;
    }

    .product-name {
        font-size: 14px;
        color: #777;
        margin-top: 2px;
    }

    /* 投诉信息 */
    .complaint-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .info-row {
        display: flex;
        font-size: 14px;
        color: #555;
        margin-top: 4px;
        border-bottom: 1px solid #f0f0f0;
        padding: 4px;
    }
    /* 去掉最后一条的下边框 */
    .info-row:last-child {
        border-bottom: none;
    }

    .label {
        width: 80px;
        font-weight: 500;
        display: block;
        font-size: 14px;
        color: #555;
    }

    .value {
        flex: 1;
        display: block;
        font-size: 14px;
        color: #333;
    }

    /* 状态颜色 */
    .status-processing {
        color: #407fff;
        font-weight: 600;
    }

    .status-done {
        color: #28a745;
        font-weight: 600;
    }

    .status-error {
        color: #dc3545;
        font-weight: 600;
    }


</style>
